<template>
  <div class="home-category-detail">
    <div class="top">
      <span>{{ props.title }}</span>
      <span>根据您的购买或浏览记录推荐</span>
    </div>
    <div class="goods-box">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
let props = defineProps<{
  title: string
}>()
</script>

<style scoped lang="less">
.home-category-detail {
  width: 990px;
  height: 500px;
  padding: 0 15px;
  background: rgba(255, 255, 255, .8);

  .top {
    line-height: 80px;

    span:nth-of-type(1) {
      font-size: 20px;
      font-weight: normal;
      margin-right: 5px;
    }

    span:nth-of-type(2) {
      font-size: 16px;
      color: #666;
    }
  }

  .goods-box {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>